<!--
 * @Author: 陆成杰
 * @Date: 2022-04-10 15:37:41
 * @LastEditTime: 2022-04-10 15:46:01
 * @LastEditors: 陆成杰
 * @FilePath: /java-finalwork/src/views/detail/All.vue
 * Copyright (c) ${now_year} by zucc-陆成杰, All Rights Reserved. 
-->
<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>秒杀活动</el-breadcrumb-item>
      <el-breadcrumb-item>已结束活动</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="9">
            <el-input placeholder="请输入秒杀名称搜索" v-model="searchValue">
              <el-button slot="append" icon="el-icon-search" @click="searchId"></el-button>
            </el-input>
          </el-col>
          <el-col :span="15">
            <img src="../../assets/bank2.png" alt="" class="createBtn" />
          </el-col>
        </el-row>
        <!-- <el-button style="float: right; padding: 3px 0" type="primary">发布</el-button> -->
        <!-- <el-button type="primary" class="createBtn">发布</el-button> -->
      </div>

      <!-- table -->
      <el-table
        :data="goodsList"
        style="width: 100%; font-size: 12px"
        border
        stripe
      >
        <el-table-column type="index"> </el-table-column>
        <el-table-column
          prop="activity_id"
          label="秒杀活动id"
        ></el-table-column>
        <el-table-column prop="user_id" label="购买用户id">
        </el-table-column>
        <el-table-column prop="amount" label="数量"></el-table-column>
        <el-table-column prop="money" label="总金额">
        </el-table-column>
        <el-table-column prop="participate_time" label="购买时间">
        </el-table-column>
        <el-table-column prop="participate_statue" label="状态">
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getAllBuy } from "../../network/home.js";
export default {
  data() {
    return {
      dialogVisible: false,
      //分页
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 10,
      },
      goodsList: [
        // {
        //   name: "年利率10%",
        //   category: "贷款产品",
        //   start: "2022-1-1",
        //   sum: "10000",
        //   num: "1",
        //   single: "100",
        // },
      ],
      total: 0,
      currentPage: 0,
      searchValue: "",
      realTime: "",
    };
  },
  created() {
    this.getAllBuy(this.queryInfo.pagesize, this.queryInfo.pagenum);
  },
  methods: {
    getAllBuy(pagesize, pagenum) {
      getAllBuy(pagesize, pagenum).then((res) => {
        console.log(res);
        this.goodsList = res.data;
        console.log(this.goodsList);
        this.total = parseInt(res.other);
      });
    },
    // 分页
    handleSizeChange(val) {
      // 请求数据记得绑定一下请求数量
      console.log(val);
      this.queryInfo.pagesize = val;
      this.getActivities(this.queryInfo.pagesize, this.queryInfo.pagenum);
    },
    handleCurrentChange(val) {
      // this.currentPage = val;
      console.log(`当前页: ${val}`);
      this.queryInfo.pagenum = val;
      this.getActivities(this.queryInfo.pagesize, this.queryInfo.pagenum);
    },

    // 修改信息dailog的控制
    fix() {
      this.dialogVisible = true;
    },
    // handleClose(done) {
    //     this.$confirm('确认关闭？')
    //       .then(_ => {
    //         done();
    //       })
    //       .catch(_ => {});
    //   }

    //搜索
    searchId(){

    }
  },
};
</script>

<style scoped>
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 12px;
}
.el-card {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}
.createBtn {
  width: 150px;
  height: 35px;
  float: right;
  padding: 3px 0;
  margin-top: -6px;
}
.el-pagination {
  margin-top: 15px;
}
</style>